import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import {
    Card, Button, Row, Col,
    Form, Checkbox, Switch, Tabs,
    Select, DatePicker, Input, Radio,
    InputNumber, Table, Typography
} from 'antd';
import {
    PlusOutlined,
    ImportOutlined,
    PrinterOutlined,
} from '@ant-design/icons';

const { TabPane } = Tabs;
class ViewPage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            visible: false,
            dataSource: []
        }
    }
    formRef = React.createRef();
    onFinish = (values) => {
        console.log(values)
    }
    render() {
        const layout = {
            labelCol: { span: 5 },
            wrapperCol: { span: 19 },
        };
        const columns = [
            {
                title: '资源组',
                dataIndex: 'PackLine',
                key: 'PackLine',
            },
            {
                title: '描述',
                dataIndex: 'TranType',
                key: 'TranType',
            },
            {
                title: '排程块数',
                dataIndex: 'ReveiveQty',
                key: 'ReveiveQty',
            },
            {
                title: '员工数量',
                dataIndex: 'Received',
                key: 'Received',
            },
        ];
        const columnsRes = [
            {
                title: '资源',
                dataIndex: 'PackLine',
                key: 'PackLine',
            },
            {
                title: '描述',
                dataIndex: 'TranType',
                key: 'TranType',
            },
            {
                title: '排程块数',
                dataIndex: 'ReveiveQty',
                key: 'ReveiveQty',
            },
            {
                title: '员工数量',
                dataIndex: 'Received',
                key: 'Received',
            },
        ];
        return (
            <PageHeaderWrapper>
                <Form {...layout} ref={this.formRef} onFinish={this.onFinish} >
                    <Row gutter={[16, 16]}>
                        <Col span={12}>
                            <Card>
                                <Tabs defaultActiveKey="1" >
                                    <TabPane tab="明细" key="1">
                                        <Form.Item style={{ marginBottom: 0 }} wrapperCol={{ offset: 5 }}>
                                            <Input.Group compact>
                                                <Form.Item
                                                    name={['OpMaster', 'OpCode']}
                                                    rules={[{ required: true, message: "工序代号必填" }]}>
                                                    <Input />
                                                </Form.Item>
                                                <Form.Item>
                                                    <Button type="primary">工序</Button>
                                                </Form.Item>
                                            </Input.Group>
                                        </Form.Item>
                                        <Form.Item label="描述" name={['OpMaster', 'OpDesc']}>
                                            <Input style={{ width: 300 }} />
                                        </Form.Item>
                                        <Form.Item
                                            wrapperCol={{ offset: 5 }}
                                            name={['OpMaster', 'Subcontract']}
                                            valuePropName="checked">
                                            <Checkbox>外包</Checkbox>
                                        </Form.Item>
                                        <Form.Item
                                            name={['OpMaster', 'OpType']}
                                            label="类型"
                                            rules={[{ required: true, message: "请选择类型" }]}>
                                            <Radio.Group name="radiogroup">
                                                <Radio value="M">生产</Radio>
                                                <Radio value="S">服务</Radio>
                                            </Radio.Group>
                                        </Form.Item>
                                        <Form.Item label="采购员" name={['OpMaster', 'BuyerID']}>
                                            <Select style={{ width: 200 }} placeholder="采购员选择">
                                            </Select>
                                        </Form.Item>

                                    </TabPane>
                                    <TabPane tab="备注" key="2">
                                        <Form.Item
                                            wrapperCol={24}
                                            name={['OpMaster', 'CommentText']} >
                                            <Input.TextArea rows={10} />
                                        </Form.Item>
                                    </TabPane>
                                </Tabs>
                            </Card>
                        </Col>
                        <Col span={12}>
                            <Card>
                                <Tabs defaultActiveKey="1" >
                                    <TabPane tab="资源组" key="1">
                                        <Table
                                            size="small"
                                            columns={columns}
                                            dataSource={this.state.dataSource} />
                                        <Button block type="dashed" icon={<PlusOutlined />}>添加资源组</Button>
                                    </TabPane>
                                    <TabPane tab="资源" key="2">
                                        <Table size="small" columns={columnsRes} dataSource={this.state.dataSource} />
                                        <Button block type="dashed" icon={<PlusOutlined />}>添加资源</Button>
                                    </TabPane>
                                </Tabs>
                            </Card>
                        </Col>
                    </Row>
                </Form>
            </PageHeaderWrapper>
        )
    }
}
export default ViewPage;